<template>
  <div class="all">
    <el-row :gutter="20">
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4">
    <div class="right">
      <p>商品管理系统</p>
      <p>Merchandise management system</p>
      <div class="denglu">
        <p>用户登录</p>
        
        <el-input v-model="name" placeholder="请输入用户名"></el-input>
        
        <el-input v-model="password" placeholder="请输入密码" show-password></el-input><br>

        <el-button type="primary" round @click="submit">登录</el-button>

      </div>
    </div>
   </el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
    
  </div>
</template>

<script>
import {adminlogin} from "../api/link.js"
export default {
  data() {
    return {
      name: '',
      password:'',
      
    }
  },
  methods:{
    submit(){
      console.log(this.name);
      console.log(this.password);
      window.sessionStorage.setItem("name",this.name)
      sessionStorage.setItem("password",this.password)
      
      adminlogin(this.name,this.password).then((ok)=>{
        console.log(ok);
        if (ok.code == 1013) {
          localStorage.setItem("token", ok.data),
          this.$message({
            
          message: '恭喜'+this.name+',登陆成功',
          type: 'success'
        });
          this.$router.push("/hkongzhi")
          
        }
        else{
          
          this.$message.error('用户名或密码错误');
        }
        
      })
      
    },
    mounted(){
      localStorage.clear()
    }
  }

}
</script>

<style scoped>
.el-input{
  margin-bottom: 10px;
  width: 240px;
  
}
.el-button{
  width: 240px;
  height: 40px;
  margin-top: 20px;
}
.denglu{
  width: 360px;
  height: 270px;
  /* background: palegreen; */
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 20px;
  text-align: center;
  padding-top: 10px;
  border: 1px dashed #20a2ec;
}
.denglu p{
  color: #0098d8;
  margin-bottom: 30px;
  margin-top: 20px;
  
}
.all{
  background-image: url(../../public/1.jpg);
  background-size: cover;
  width: 100%;
  height: 100%;
}
.right{
  /* background: orange; */
  width: 400px;
  height: 300px;
  margin-top: 190px;

}
.el-row {
    margin-bottom: 20px;
   
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    /* background: #99a9bf; */
  }
  .bg-purple {
    /* background: #d3dce6; */
  }
  .bg-purple-light {
    /* background: #e5e9f2; */
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  
  .right>p{
    color: #fff;
    text-align: center;
  }
  .right>p:nth-child(1){
    font-size: 35px;
    font-family:STXihei;
    font-weight: bold;
  }
  
</style>